import BasicMapUtils from './BasicMapUtils'
import { getPoliceMap } from 'api/situationAwareness/serviceForce/screenCenter'
import policeIcon from 'assets/images/situational-awareness/police-icon.png'

const ol = window.ol

class ServiceForce extends BasicMapUtils {
  constructor() {
    super()
    this.maxFeatureCount = ''
    this.earthquakeCluster = ''
    this.currentResolution = ''
    this.mapView.animate({ zoom: 15 })
    this.getPoliceMap()
    this.createPoliceMarker()
    this.initServiceForceInteraction()
  }

  // 获取地图扎点数据
  getPoliceMap () {
    const params = {
      dzcode: ''
    }
    getPoliceMap(params).then(res => {
      console.log('勤务力量-地图打点数据', res)
    }).catch(err => {
      console.error('勤务力量-地图打点数据', err)
    })
  }

  // 创建警察、辅警marker layer
  createPoliceMarker () {
    const markerList = [
      { lat: 22.803142, lng: 108.379968 },
      { lat: 22.829092, lng: 108.424085 },
      { lat: 22.797287, lng: 108.312677 },
      { lat: 22.804408, lng: 108.295854 }
    ]
    const markerFeatureList = []
    markerList.forEach(({ lat, lng }) => {
      const centerPoint = new ol.geom.Point(this.coordTransform.gcj02tobd09(lng, lat))
      this.coordTransform.convertGeoIntoMap(centerPoint)
      const [x, y] = centerPoint.getCoordinates()
      const { markerFeature } = this.createMarker({ x, y, icon: policeIcon, userData: {} })
      markerFeatureList.push(markerFeature)
    })
    const markerSource = new ol.source.Vector({
      features: markerFeatureList
    })
    const markerLayer = new ol.layer.Vector({
      source: markerSource
    })
    this.map.addLayer(markerLayer)
  }

  // marker点 交互事件
  initServiceForceInteraction () {
    let overlay = '' // 弹窗
    this.map.on('click', e => {
      const pixel = this.map.getEventPixel(e.originalEvent)
      const feature = this.map.forEachFeatureAtPixel(pixel, feature => {
        return feature
      })
      overlay && overlay.setPosition(undefined)
      if (feature) {
        if (feature.get('userData') && feature.get('userData').type && feature.get('userData').type === 'marker') {
          // 给站点添加弹窗事件
          overlay = this.createOverlay({
            htmlElement: document.querySelector('.police-info-dialog'),
            position: e.coordinate
          })
          this.map.addOverlay(overlay)
        }
      }
    })
  }
}

export default ServiceForce
